import "../assets/css/index.css";
import {
    MailOutlined,
    DownOutlined
} from '@ant-design/icons';
import { Layout, Menu, Dropdown, message } from 'antd';
import { Suspense, lazy } from 'react';
import { Route, Routes, Navigate } from 'react-router-dom'
import { useNavigate } from "react-router-dom";

function Index() {
    let userinfo = JSON.parse(sessionStorage.getItem('userinfo'));
    let navigate = useNavigate();
    let A = lazy(() => import('../views/menu'))
    let B = lazy(() => import('../views/home'))
    let { Header, Sider, Content } = Layout;
    let menus = userinfo.menus.map(item => getItem(item.title, item.id, <MailOutlined />, item.children.map(item => getItem(item.title, item.url))));

    function getItem(label, key, icon, children, type) {
        return {
            key,
            icon,
            children,
            label,
            type,
        };
    }

    function select(e) {
        navigate('/index' + (e.key.startsWith('/', '/') ? e.key : '/' + e.key));
    }

    const headerStyle = {
        color: '#fff',
        height: 64,
        paddingInline: 50,
        lineHeight: '64px',
        backgroundColor: '#7dbcea',
    };

    const contentStyle = {
        minHeight: 120,
        lineHeight: '120px',
        color: '#fff',
        backgroundColor: '#108ee9',
    };

    const siderStyle = {
        lineHeight: '120px',
        color: '#fff',
        backgroundColor: '#3ba0e9',
    };

    const onClick = () => {
        message.success('退出成功');
        sessionStorage.removeItem('userinfo');
        navigate('/login');
    };

    const items = [
        {
            label: '退出登录',
            key: '退出登录',
        },
    ];

    return (
        <div className='index'>
            <Layout className="layout1">
                <Header style={headerStyle}>
                    <h1>后台管理系统</h1>
                    <Dropdown
                        className="Dropdown"
                        menu={{
                            items,
                            onClick,
                        }}
                    >
                        <a onClick={(e) => e.preventDefault()}>
                            {userinfo.username}
                            <DownOutlined />
                        </a>
                    </Dropdown>
                </Header>
                <Layout>
                    <Sider style={siderStyle}>
                        <Menu
                            onSelect={select}
                            className="menu"
                            defaultSelectedKeys={['1']}
                            defaultOpenKeys={['sub1']}
                            mode="inline"
                            theme="dark"
                            items={menus}
                        />
                    </Sider>
                    <Content style={contentStyle}>
                        <Suspense>
                            <Routes>
                                <Route path="/menu" element={<A></A>}></Route>
                                <Route path="/home" element={<B></B>}></Route>
                                <Route
                                    path=""
                                    element={<Navigate to="/home"></Navigate>}
                                ></Route>
                            </Routes>
                        </Suspense>
                    </Content>
                </Layout>
            </Layout>
        </div>
    )
}

export default Index;